<template>
	<view class="wrap">
		<!-- 顶部状态信息start -->
		<view class="status-info">
			<view class="status-info-title" @click="queryLog">
				{{ planStatusList[detail.planStatus - 1] }}
				<uni-icons color="#999999" size="16" type="arrowright"></uni-icons>
			</view>
			<view class="status-info-tips" v-if="times.dateDiff!=0&&(detail.planStatus ==1||detail.planStatus ==3) && times.dateDiff > 0">
				请在
				<text>{{ times.minutes }}分{{ times.seconds }}秒</text>
				内到达困人地点
			</view>
			<view class="status-info-tips" v-if="times.dateDiff!=0&&(detail.planStatus ==1||detail.planStatus ==3) && times.dateDiff <= 0"><text>任务已超时</text></view>
		</view>
		<!-- 顶部状态信息end -->
		<!-- 被困人信息 -->
		<view class="content">
			<view class="content-title">被困人信息</view>
			<view class="content-item">
				<view class="lable">当前状态</view>
				<picker :disabled="detail.planStatus !=2" class="info" :value="detail.status - 1" :range="statusList" @change="changeStatus">
					<view>
						{{ statusList[detail.status - 1] }}
						<uni-icons color="#999999" size="13" type="arrowright"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="content-item">
				<view class="lable">联系方式</view>
				<view class="info">
					<text class="link" @click="callPhone(detail.phone)">{{ detail.phone || '' }}</text>
				</view>
			</view>
		</view>
		<!-- 被困人信息end -->
		<!-- 基础信息 -->
		<view class="content">
			<view class="content-title">基础信息</view>
			<view class="content-item">
				<view class="lable">任务编号</view>
				<view class="info">
					{{ detail.planNum || '' }}
					<text class="link" @click="copyFuc(detail.planNum)">复制</text>
				</view>
			</view>
			<view class="content-item">
				<view class="lable">故障地点</view>
				<view class="info">{{ detail.address || '' }}</view>
			</view>
			<view class="content-item">
				<view class="lable">问题描述</view>
				<view class="info">{{ detail.questionDesc || '' }}</view>
			</view>
			<view class="content-item">
				<view class="lable">创建时间</view>
				<view class="info">{{ detail.createTime || '' }}</view>
			</view>
		</view>
		<!-- 基础信息end -->
		<!-- 联系 -->
	<!-- 	<view class="tels">
			<view class="tels-item" @click="callPhone('物业电话')">
				<uni-icons color="#999999" type="phone-filled"></uni-icons>
				<text>联系物业</text>
			</view>
			<view class="line"></view>
			<view class="tels-item" @click="callPhone('客服电话')">
				<uni-icons color="#999999" type="phone-filled"></uni-icons>
				<text>联系客服</text>
			</view>
		</view> -->
		<!-- 联系end -->
		<!-- 底部流转按钮 -->
	<!-- 	<view class="footers">
			<button :class="disabled ? 'disabled' : ''" @click="taskFlowFuc" v-if="detail.planStatus == 1">出发</button>
			<button :class="disabled ? 'disabled' : ''" @click="signFuc" v-if="detail.planStatus == 3">到达困人地点</button>
			<button :class="disabled ? 'disabled' : ''" @click="taskFlowFuc" v-if="detail.planStatus == 2">完成任务</button>
		</view> -->
		<view class="finish">
			<view class="finishItem">
				<view class="connect" @click="callPhone(connectNum)">
					<uni-icons type="phone-filled" size="20" color="#999"></uni-icons>
					<text>客服</text>
				</view>
				<view class="connect" @click="callPhone(detail.buildPhone)">
					<uni-icons type="phone-filled" size="20" color="#999"></uni-icons>
					<text>物业</text>
				</view>
			</view>
			<view class="finishItem">
				<view :class="disabled ? 'flex finishOrder disabled' : 'flex finishOrder'" @click="taskFlowFuc" v-if="detail.planStatus == 1">出发</view>
				<view :class="disabled ? 'flex finishOrder disabled' : 'flex finishOrder'" @click="signFuc" v-if="detail.planStatus == 3">到达困人地点</view>
				<view :class="disabled ? 'flex finishOrder disabled' : 'flex finishOrder'" @click="taskFlowFuc" v-if="detail.planStatus == 2">完成任务</view>
				<view class="flex finishOrder disabled" v-if="detail.planStatus == 4">已完成</view>
				<!-- <view :class="['flex', 'finishOrder', planStatus === 4 ? 'noClick' : '']" @click="handleFinish">{{ planStatus !== 4 ? '维修完成' : '已完成' }}</view> -->
			</view>
		</view>
		<!-- 底部流转按钮end -->

		<!-- 任务跟踪 -->
		<!-- 弹出组件 -->
		<task-tracking :list="repairLogList" :show="showTarkLog" :plan-id="id" @close="showTarkLog=false"></task-tracking>
		<!-- <popup-layer @closed="popClose" ref="popupRef" :direction="'top'" :autoClose="false">
			<view class="box"> 
				<view class="box_title flex">
					<view>任务跟踪</view>
					<uni-icons type="closeempty" size="16" color="#999" @click="popClose"></uni-icons>
				</view>
				<view v-if="repairLogList.length">
					<view class="tarkList" v-for="(item, i) in repairLogList" :key="i">
						<view class="time">{{ item.createTime }}</view>
						<view class="tark">{{ item.typeName }}</view>
					</view>
				</view>
				<view class="empty flex" v-else>暂无数据</view>
			</view>
		</popup-layer> -->
	</view>
</template>

<script>
// import popupLayer from '@/components/popup-layer/popup-layer.vue';
import { getRescue, setRescue, updataRescue } from '@/apis/rescue.js';
import {  repairLog } from '@/apis/repair.js';
import { getBuilding } from '@/apis/building.js';
import { hanleToken} from '@/utils/utils.js';
import {  signinPage } from '@/apis/index.js';
// 经纬度距离计算 
import { getDistance } from '@/utils/tools.js'; 
import TaskTracking from '@/components/task-tracking/index.vue';
export default {
	components: {
		// popupLayer,
		TaskTracking
	},
	data() {
		return {
			id: '',
			buildingId: '',
			planStatusList: ['待处理', '救援中', '已出发', '已完成'],
			statusList: ['待解救', '已解救'],
			detail: {
				planStatus: 1,
				status: 1
			},
			timeDown: null,
			times: {
				dateDiff: 0
			},
			buildings: {},
			repairLogList: [],
			userDataPage:{},
			connectNum:this.$config.phoneNum,
			showTarkLog:false
		};
	},
	computed: {
		disabled() {
			return false;
		}
	},
	onLoad(os) {
		console.log('os', os);
		this.id = os.id;
		this.buildingId = os.buildingId;
		this.userDataPage = hanleToken('get', 'userData');
		this.getDetail();
		this.getBuilding();
	},
	onUnload() {
		clearInterval(this.timeDown);
	},
	methods: {
		// 展开任务跟踪
		queryLog() {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			repairLog({ planId: this.id }).then(res => {
				uni.hideLoading();
				this.repairLogList = res.data;
				this.showTarkLog = true;
				console.log(res);
			});
		},
		// 关闭任务跟踪
		popClose() {
			// 或者 boolShow = false
			this.$refs.popupRef.close(); 
		},
		// 签到
		signFuc() {
			let that = this;
			uni.getLocation({
				type: 'gcj02',
				success(res) {
					let distance = getDistance(res.latitude, res.longitude, that.buildings.latitude, that.buildings.longitude);
					if (distance > that.$config.maxDistance) {
						uni.showToast({
							title: `请在困人地点${that.$config.maxDistance}米范围内点击到达`,
							icon: 'none'
						});
						return;
					} else {
						that.signintime();
					}
				},
				fail() {
					uni.showToast({
						title: '请确认经纬度信息授权或打开GPS',
						icon: 'none'
					});
				}
			});
		},
		// 任务流转  ['待处理', '进行中', '已签到', '已完成']
		taskFlowFuc(showToast = true) {
			let status = [3,4,2];
			if (status[this.detail.planStatus - 1] == 4 && this.detail.status == 1) {
				uni.showToast({
					title:'请修改被困人状态',
					icon:'none'
				});
				return; 
			}
			return new Promise(() => {
				let that = this;

				let form = {
					id: this.id,
					status:status[this.detail.planStatus - 1] 
				};
				if (showToast) {
					uni.showLoading({
						title: '提交中',
						mask: true
					});
				}

				setRescue(form).then(() => {
					uni.hideLoading();
					that.getDetail();
					if (showToast) {
						uni.showToast({
							title: '提交成功'
						});
					}
				});
			});
		},
		// 签到确定
		signintime() {
			let that = this;
			uni.showLoading({
				title:'提交中'
			});
			signinPage({ 
				elevatorPlanId: that.id, 
				userId: that.userDataPage.user_id,
				signImage:''
			}).then(() => {
				uni.hideLoading();
					
				uni.showToast({
					title: '签到成功',
					icon: 'none'
				});
				setTimeout(()=>{
					that.getDetail();
				},500);
			});
		},
		// 修改被困人状态
		changeStatus(res) {
			console.log(res.detail.value);
			this.detail.status = Number(res.detail.value) + 1;
			uni.showLoading({
				title: '更新中'
			});
			// let that = this;
			updataRescue({ id: this.detail.id, status: Number(res.detail.value) + 1 }).then(() => {
				uni.hideLoading();
				uni.showToast({
					title: '更新成功'
				});
			});
		},
		// 设置倒计时
		setTimeDown() {
			if (this.timeDown) {
				clearInterval(this.timeDown);
			}
			let that = this; 
			this.timeDown = setInterval(function() {
				let d1 = new Date().getTime();
				let d2 = new Date(that.detail.createTime.replace(/-/g, '/')).getTime();
				let d3 = d2 + (30 * 60 * 1000);
				console.log('d123',d1,'--',d2,'--',d3,that.detail.createTime.replace(/-/g, '/'));
				if (d3 - d1 < 0) {
					that.times.dateDiff = d3 - d1;
					clearInterval(that.timeDown);
				} else {
					that.times = that.formatDuring(d3 - d1);
				}
				console.log(that.times);
				// clearInterval(this.timeDown)
			}, 1000);
		},
		formatDuring(mss) {
			var days = parseInt(mss / (1000 * 60 * 60 * 24));
			var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
			var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
			var seconds = (mss % (1000 * 60)) / 1000;
			return {
				dateDiff:mss,
				day:days,
				hours:hours,
				minutes,
				seconds:seconds.toFixed(0)
			};  
		},
		// 获取小区信息
		getBuilding() {
			getBuilding(this.buildingId)
				.then(res => {
					console.log('getBuilding', res);
					this.buildings = res.data;
				})
				.catch(() => {});
		},
		// 获取详情
		getDetail() {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			getRescue(this.id)
				.then(res => {
					console.log(res);
					this.detail = res.data;
					this.setTimeDown();
					uni.hideLoading();
				})
				.catch(()=> {
					uni.hideLoading();
				});
			// getDetail({
			// 	planId:this.id
			// }).then(res=>{
			// 	 console.log(res)
			// 	 this.detail=res.data
			// 	 uni.hideLoading()
			// }).catch(err=>{
			// 	uni.hideLoading()
			// })
		},
		// 复制到剪贴板
		copyFuc(str) {
			uni.setClipboardData({
				data: str
			});
		},
		// 拨打电话
		callPhone(phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f3f6f8;
	color: #333333;
}

.status-info {
	width: calc(100% - 40rpx);
	padding: 28rpx 20rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
	&-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	&-tips {
		font-size: 24rpx;
		color: #666;
		text {
			color: #e02020;
		}
	}
}

.content {
	width: calc(100% - 40rpx);
	padding: 0 20rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
	&-title {
		font-size: 32rpx;
		font-weight: bold;
		padding: 20rpx 0;
	}
	&-item {
		font-size: 28rpx;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #e9e9e9;
		display: flex;
		justify-content: space-between;
		.lable {
			color: #666666;
		}
		.info {
			max-width: 65%;
		}
		.link {
			color: #0091ff;
			margin-left: 10rpx;
		}
	}
	&-item:last-child {
		border: none;
	}
}

.tels {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	margin-bottom: 200rpx;
	height: 84rpx;
	&-item {
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		text {
			margin-left: 6rpx;
		}
	}
	.line {
		width: 1rpx;
		height: 40rpx;
		background-color: #e9e9e9;
	}
}
.footers {
	width: 100%;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	button {
		margin: 14rpx;
		background-color: #0091ff;
		line-height: 70rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #fff;
	}
	button:after {
		border: none;
	}
	.disabled {
		background-color: #efefef;
		color: #cccccc;
	}
}

.box {
	background: #ffffff;
	border-radius: 16rpx 16rpx 0rpx 0rpx;
	padding: 20rpx;
	min-height: 500rpx;
	.box_title {
		font-size: 32rpx;
		font-weight: 600;
		display: flex;
		height: 60rpx;
		justify-content: space-between;
		margin-bottom: 24rpx;
	}
	.tarkList {
		display: flex;
		padding-left: 40rpx;
		height: 70rpx;
		align-items: center;
		color: #333;
		.time {
			padding-right: 40rpx;
			color: #666;
		}
		.tark {
			display: flex;
			flex-wrap: wrap;
		}
	}
}
.partList {
	border-bottom: 2rpx solid #e9e9e9;
}

.finish {
		justify-content: space-between;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		padding: 18rpx 20rpx;
		background-color: #fff;
		.finishItem {
			display: flex;
		}

		.finishOrder {
			width: 524rpx;
			height: 70rpx;
			background: #0091ff;
			border-radius: 8rpx;
			color: #fff;
		}
		.connect {
			display: flex;
			flex-direction: column;
			font-size: 20rpx;
			color: #666;
			align-items: center;
		}
		.connect:nth-child(1) {
			margin-left: 26rpx;
			margin-right: 38rpx;
		}
		.disabled {
			background-color: #efefef;
			color: #cccccc;
		}
	}
</style>
